<template>
    <div class="city">
        <city-header :alphabetList="alphabetList" :cities="cities" :hotCities="hotCities"></city-header>
    </div>
</template>

<script>
    import axios from 'axios';
    import CityHeader from "../../components/HomeCity/CityHeader";

    export default {
        name: "HomeCity",
        data(){
            return{
                letter: '',
                cities: {},
                hotCities: [],
                alphabetList: [],
                loading: true
            }
        },
        components:{
            CityHeader
        },
        mounted() {
            this.getAllCity();
        },
        methods:{
            getAllCity(){
                axios.get('./mock/city.json').then(res => {
                    res = res.data;
                    if (res.data) {
                        const data = res.data;
                        this.cities = data.cities;
                        this.hotCities = data.hotCities;
                        this.alphabetList = data.alphabetList;
                    }
                })
            }
        }
    }
</script>

<style scoped>
.city{
    background: #f7f8fa;
}
</style>